<template>
  <div class="work-list">
    <n-spin :show="tableInfo.listLoading">
      <div class="list">
        <div
          class="card hover-shadow"
          v-for="item in tableInfo.tableData"
          :key="item.id"
          @click="handDetail(item)"
        >
          <div class="cover">
            <img v-lazy="$getImg(item.cover)" />
          </div>
          <div class="name u-line-1">{{ item.name }}</div>
          <div class="tags">
            <div class="tag free" v-if="item.price === 0">限免</div>
            <div class="tag free" v-else>{{ item.price }}币</div>
            <div class="tag">{{ item.photo_count }}图</div>
            <div class="tag">{{ item.video_count }}视频</div>
          </div>
          <div class="tool">
            <div class="date">
              {{ timeAgoTwo(item.create_at) }}
            </div>
            <div class="desc">
              <span>
                {{ item.buy_count }}
                <i class="esayIcon esayIcon-renwuzhongxin-goumaishangpin"></i>
              </span>
              <span style="padding-left: 5px">
                {{ item.coll_count }}
                <i class="esayIcon esayIcon-shoucang"></i>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination" v-if="tableInfo.total > 1">
        <n-pagination
          v-model:page="tableInfo.queryForm.current"
          :page-count="tableInfo.total"
          :page-sizes="tableInfo.pageSizes"
          show-quick-jumper
          :simple="isMoile"
          show-size-picker
          @updatePage="pageChange"
          @updatePageSize="sizeChange"
        />
      </div>
    </n-spin>
  </div>
</template>
<script setup lang="ts">
import homeApi from '@/service/api/home'
import { useApi } from '@/hooks/useApi'
import { useAppsStore } from '@/stores/modules/app'
import { timeAgoTwo } from '@/utils'
type PropsState = {
  userId: string | number | null
}
const props = withDefaults(defineProps<PropsState>(), {
  userId: null
})
const { width } = useWindowSize()
function IsPhone() {
  var info = navigator.userAgent
  return /mobile/i.test(info)
}
const isMoile = ref(IsPhone())

const useStore = useAppsStore()
const { setLoginShow } = useStore
const router = useRouter()
const { getUserInfo: userInfo } = storeToRefs(useStore)
const handDetail = (e: any) => {
  if (!userInfo.value?.id) {
    setLoginShow(true)
    return
  }
  router.push({
    path: '/detail',
    query: {
      id: e.id
    }
  })
}

let requestSize = 0
if (width.value <= 800) {
  requestSize = 10
} else if (width.value <= 1300) {
  requestSize = 12
} else {
  requestSize = 12
}

const { tableInfo, pageChange, sizeChange, queryData } = useApi({
  isRequest: false,
  getData: homeApi.collList,
  initForm: {
    userid: null,
    work_id: null,
    type_id: null,
    author_id: null,
    institution_id: null,
    keyword: null,
    tags: null,
    size: requestSize
  }
})

const init = () => {
  tableInfo.queryForm.userid = props.userId
  queryData()
}
init()
const handSearch = (e: any) => {
  tableInfo.queryForm.type_id = e.oneCategoryId
  tableInfo.queryForm.author_id = e.authorId
  tableInfo.queryForm.institution_id = e.institutionId
  // tableInfo.queryForm.sortType = e.sortType
  queryData()
}
defineExpose({
  handSearch
})
</script>

<style scoped lang="scss">
.work-list {
  flex: 1 0 0;
  overflow-y: auto;
  .list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    margin: 30px 0 0;
    gap: 20px;

    .card {
      width: 100%;
      cursor: pointer;
      border-radius: 5px;
      overflow: hidden;
      background: #fff;

      .cover {
        img {
          width: 100%;
          aspect-ratio: 4/5.5;
          object-fit: cover;
          -webkit-user-drag: none;
          display: block;
        }
      }

      .name {
        font-size: 14px;
        margin-top: 10px;
        color: #333;
        padding: 0 5px;
      }

      .tags {
        margin-top: 5px;
        padding: 0 5px;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;

        .tag {
          font-size: 10px;
          background: rgba(136, 136, 136, 0.1);
          padding: 0 6px;
          border-radius: 4px;
          color: #888;
        }

        .free {
          background: linear-gradient(
            317deg,
            #4d4c4c 30%,
            #7b7b7b 70%,
            #5f5c5c 100%
          );
          color: #ddd;
        }
      }

      .tool {
        margin-top: 8px;
        display: flex;
        align-content: center;
        justify-content: space-between;
        padding: 0 5px 10px 5px;

        .date {
          font-size: 12px;
          color: #999;
        }

        .desc {
          margin-top: 0;
          padding: 0 5px;
          color: #999;
          font-size: 12px;
        }
      }
    }
  }

  .pagination {
    padding: 40px 0;
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 1300px) {
  .work-list {
    .list {
      gap: 20px 10px;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
  }
}
@media (max-width: 800px) {
  .work-list {
    .list {
      margin: 10px 0px 0 0px;
      grid-template-columns: 1fr 1fr;
    }
    .pagination {
      padding: 20px 0;
    }
  }
}
</style>
